.-skill{
	background: rgb(77, 94, 143) url(../img/bg.png);
	.-contain{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		max-width: 800px;
		margin: 0 auto;
		min-width: 750px;
		.-skill-circle{
			padding: 5px;
			position: relative;
			font-size: 12px;
			width: 300px;
			color: #FFF;
			.-outCircle{
				width: 242px;
				height: 242px;
				border: 4px dashed #999;
				border-radius: 50%;
				position: relative;
				margin: 0 auto;
				.-out{
					width: 50px;
					height: 50px;
					border-radius: 50%;
					position: absolute;
					text-align: center;
					line-height: 50px;
					-webkit-backface-visibility: hidden; //优化android卡顿
				}
				.-out:nth-child(1){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -4s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
				}
				.-out:nth-child(2){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -6s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate;
				}
				.-out:nth-child(3){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -8s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) -4s infinite alternate;
				}
				.-out:nth-child(4){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -10s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) -6s infinite alternate;
				}
				.-out:nth-child(5){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -12s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) -8s infinite alternate;
				}
				.-out:nth-child(6){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -14s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) -10s infinite alternate;
				}
				.-out:nth-child(7){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -16s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) -12s infinite alternate;
				}
				.-out:nth-child(8){
					animation: outX 8s cubic-bezier(0.36,0,0.64,1) -18s infinite alternate, outY 8s cubic-bezier(0.36,0,0.64,1) -14s infinite alternate;
				}
			}
			.-innerCircle{
				width: 142px;
				height: 142px;
				border: 4px dashed #999;
				border-radius: 50%;
				position: absolute;
				text-align: center;
				line-height: 50px;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				.-inner{
					width: 40px;
					height: 40px;
					border-radius: 50%;
					position: absolute;
					text-align: center;
					line-height: 40px;
					-webkit-backface-visibility: hidden;//优化android卡顿
				}
				.-inner:nth-child(1){
					animation: innerX 8s cubic-bezier(0.36,0,0.64,1) -4s infinite alternate, innerY 8s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
				}
				.-inner:nth-child(2){
					animation: innerX 8s cubic-bezier(0.36,0,0.64,1) -8s infinite alternate, innerY 8s cubic-bezier(0.36,0,0.64,1) -4s infinite alternate;
				}
				.-inner:nth-child(3){
					animation: innerX 8s cubic-bezier(0.36,0,0.64,1) -12s infinite alternate, innerY 8s cubic-bezier(0.36,0,0.64,1) -8s infinite alternate;
				}
				.-inner:nth-child(4){
					animation: innerX 8s cubic-bezier(0.36,0,0.64,1) -16s infinite alternate, innerY 8s cubic-bezier(0.36,0,0.64,1) -12s infinite alternate;
				}
			}
		}
		.-des{
			text-align: center;
			color: #FFF;
			line-height: 24px;
			font-size: 18px;
		}
	}
	.-contain-en{
		max-width: 1200px;
	}
}

@keyframes outX {
	0% {  left: -27px;  }
	100% {  left: 217px;  }
}
@keyframes outY {
	0% {  top: -27px;  }
	100% {  top: 217px;  }
}
@keyframes innerX {
	0% {  left: -22px;  }
	100% {  left: 122px;  }
}
@keyframes innerY {
	0% {  top: 122px;  }
	100% {  top: -22px;  }
}

@media screen and (max-width: 1366px) {
	.-skill {
		.-content {
			top: 200px;
		}
	}
}


@media screen and (max-width: 600px){
	.-skill{
		.-content{
			top: 80px;
			.-contain{
				min-width: 0;
				width: 90%;
				.-skill-circle{
					margin: 0 auto;
				}
				.-des{
					padding-top: 10px;
					font-size: 14px;
					line-height: 16px;
					margin: 0 auto;
				}
				.-des-en{
					font-size: 12px;
				}
			}
		}
	}
}
@media screen and (max-height: 550px){
	.-skill{
		.-content {
			top: 65px;
			.-contain{
				.-des-en{
					padding-top: 2px;
					p{
						margin: 5px 0;
					}
				}
			}
		}
	}
}